<%@page pageEncoding="utf-8" contentType="text/html; charset=utf-8"%>
<html>
	<head>
		<script src="/js/jquery.min.js"></script>
		<script type="text/javascript" src="http://cdn.staticfile.org/webuploader/0.1.5/webuploader.min.js"></script>
		<link rel="stylesheet" href="http://cdn.staticfile.org/webuploader/0.1.5/webuploader.css">
		<link rel="stylesheet" type="text/css" href="/css/webuploader.css">
		<style type="text/css">
		.upload_component{
		    width: 100%;
		    height: 100%;
		    background-image: none;
		    background-position-x: 0%;
		    background-position-y: 0%;
		    background-repeat: repeat;
		    background-attachment: scroll;
		    display: block;
		    cursor: pointer;
		    opacity: 0;
		    background-clip: border-box;
		    background-origin: padding-box;
		    background-size: auto;
		    background-color: rgb(255, 255, 255);
			}
		
		</style>
	</head>
	<body>
	<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
	    <div class="btns">
	        <div id="picker">选择文件</div>
	        <button id="ctlBtn" class="btn btn-default">开始上传</button>
	    </div>
	</div>
	<div>
		<img id="image" src="">
		<input type="hidden" id="imageUrl"/>
	</div>
	<div class="webuploader-pick" onclick="cancelPic()">取消</div>
	</body>
	<script type="text/javascript">
		var uploader = null;
			uploader = WebUploader.create({
			    // swf文件路径
			    //swf: '/swf/Uploader.swf',
			    // 文件接收服务端。
			    server: '/admin/upload',
			    // 选择文件的按钮。可选。
			    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
			    pick: '#picker',
			    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
			    resize: false,
			    //允许重复图片
			    duplicate:true,
			    accept:{
			    	title: '图片',
				    extensions: 'gif,jpg,jpeg,bmp,png',
				    mimeTypes: 'image/jpg,image/jpeg,image/png'
				},
				auto:true,
				method:"post"
			});
			uploader.on("uploadSuccess",function(file,response){
				alert("uploadSuccess");
				console.log(response);
				if(response.code==100){
					alert(response.msg);	
					return;
				}
				var url = response.data;
				$("#image").attr("src",url);
				$("#imageUrl").val(url);
			}).on("beforeFileQueued",function(file){
				
			}).on("startUpload",function(){
				
			}).on("uploadError",function(file,reason){
				
			}).on("uploadStart",function(file){
				console.log(file);
			});
	
		function cancelPic(){
			$("#image").removeAttr("src");
			$("#imageUrl").val("");
		}
	</script>
</html>